<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promis animation</title>
  <style>
    .ball{
      height:40px;
      width:40px;
      border-radius: 50%;
    }
    .ball1{
      background: red;
    }
    .ball2{
      background: yellow;
    }
    .ball3{
      background: green;
    }
  </style>
  <script src="./node_modules/bluebird/js/browser/bluebird.js"></script>
</head>
<body>
  <div class="ball ball1" style="margin-left:0;"></div>
  <div class="ball ball2" style="margin-left:0;"></div>
  <div class="ball ball3" style="margin-left:0;"></div>

  <script>
  window.onload = function(){
    var ball1 = document.querySelector(".ball1")
    var ball2 = document.querySelector(".ball2")
    var ball3 = document.querySelector(".ball3")

    function animate(ball,distance,cb){
      setTimeout(function(){
        var marginLeft = parseInt(ball.style.marginLeft,10)
        if(marginLeft === distance){
          cb && cb()
        }else{
          if(marginLeft < distance){
            marginLeft++
          }else{
            marginLeft--
          }
          ball.style.marginLeft = marginLeft + "px"
          animate(ball,distance,cb)

        }
      },13)
    }


    // animate(ball1,100,function(){

    //   animate(ball2,200,function(){
    //     animate(ball3,300,function(){
    //       animate(ball3,150,function(){
    //         animate(ball2,150,function(){
    //           animate(ball1,150,function(){

    //           })
    //         })
    //       })
    //     })
    //   })
    // })

    var Promise = window.Promise;

    function PromiseAnimate (ball,distance){
      return new Promise(function(resolve,reject){
        function _animate(){
          setTimeout(function(){
            var marginLeft = parseInt(ball.style.marginLeft,10)
            if(marginLeft === distance){
              // 简单的说，执行resolve()的时候，会调用以后then里面的第一个参数指定的函数
              // 改变promise对象的状态。Promise状态改变后，会调用对应的回调方法。
              resolve()
            }else{
              if(marginLeft < distance){
                marginLeft++
              }else{
                marginLeft--
              }
              ball.style.marginLeft = marginLeft + "px"
              _animate()

            }
          },13)
        }
        _animate()
      })
    }

    PromiseAnimate(ball1,100)
      .then(function(){
        return PromiseAnimate(ball2,200)
      })
      .then(function(){
        return PromiseAnimate(ball3,300)
      })
      .then(function(){
        return PromiseAnimate(ball3,150)
      })
      .then(function(){
        return PromiseAnimate(ball2,150)
      })
      .then(function(){
        return PromiseAnimate(ball1,150)
      })



    function fn(num) {
        return new Promise(function(resolve, reject) {
            if (typeof num == 'number') {
                resolve();
            } else {
                reject("我就呵呵哒！！");
            }
        })
        // .then(function() {
        //     console.log('参数是一个number值');
        // }, function() {
        //     console.log('参数不是一个number值');
        // })
    }

    fn('hahha')
    .then(function() {
        console.log('参数是一个number值');
    }, function(error) {
        console.log('参数不是一个number值');
        console.log(error)//我就呵呵哒！！
    });
    fn('hahha')
    .then(function() {
        console.log('参数是一个number值????');
    })
    .catch(function(error){
      console.log('参数不是一个number值,我是catch');
      console.log(error)//我就呵呵哒！！
    })


// fn(1234).then(function() {
//         console.log('参数是一个number值');
//     }, function() {
//         console.log('参数不是一个number值');
//     });

    



  }
    

  </script>
</body>
</html>